<template>
  <div class="content">
    <dc-header :page-to="'/home'" :title="'客流分析'" :rightIcon="''"></dc-header>
    <div class="head-top">
      <dc-date @getTabBarDatep="getDate"></dc-date>
    </div>
    <div class="common-card mt20 bg-white">
      <dc-row class="pt40 pb40" type="flex" justify="space-around">
        <dc-col class="card-data" span="8">
          <span class="num">{{info.currentFlow}}</span>
          <span class="label">今日客流</span>
        </dc-col>
        <dc-col class="card-data" span="8">
          <span class="num">{{info.sameTermFlow}}</span>
          <span class="label">上周同日客流</span>
        </dc-col>
        <dc-col class="card-data" span="8">
          <span class="num">{{info.peopleAvgConsume}}</span>
          <span class="label">人均消费</span>
        </dc-col>
      </dc-row>
    </div>
    <component :is="charts" :change="currentDate"></component>
    <div class="common-card mt20 mb20">
      <dc-cell title="明星顾客" class="sub-title no-border"></dc-cell>
      <dc-cell v-for="item in stars" :key="item.name" :title="item.name" class="passenger-star">
        <span>累计来店{{item.consumeNum}}次</span>
        <img slot="icon" :src="item.imageUrl || 'static/icon-start-guest.png'"/>
      </dc-cell>
    </div>
  </div>
</template>

<script>
  import header from '@/components/header';
  import date from '@/components/datetabbar/all';
  import {col, row} from '@/components/Flex';
  import cell from '@/components/cell';
  import api from '@/common/api/passenger';
  import day from './dayType';
  import other from './weekType';
  import store from '@/store/shopAlter';

  export default {
    components: {
      'dc-header': header,
      'dc-date': date,
      'dc-col': col,
      'dc-row': row,
      'dc-cell': cell,
      day: day,
      other: other
    },
    data () {
      return {
        info: {},
        stars: [],
        charts: '',
        currentDate: '',
        storeCode: store.state.shopAlter.store.storeCode
      };
    },
    methods: {
      getDate (date) {
        if (date) {
          this.currentDate = date;
          this.currentDate.storeCode = this.storeCode;
          this.charts = parseInt(date.type) === 1 ? 'day' : 'other';
          this.buildChart();
        }
      },
      //重新生成所有图表
      buildChart () {
        let data = {
          timeFlag: this.currentDate.type,
          beginTime: this.currentDate.startTime,
          endTime: this.currentDate.endTime
        };
        this._getFlowInfo(data);
        this._getStartCustomer(data);
      },
      _getFlowInfo (data) {       //获取门店客流分析信息
        api.getFlowInfo(data)
          .then(res => {
            this.info = res;
          });
      },
      _getStartCustomer (data) {       //获取明星顾客
        api.getStartCustomer(data)
          .then(res => {
            this.stars = res;
          });
      }
    }
  };
</script>

<style lang="scss" scoped>
  @import "../../../assets/css/variable";
  .passenger-star {
    .mint-cell-text, .mint-cell-value {
      color: #333333;
      font-size: px2rem(14px);
      font-weight: normal;
    }
    img {
      width: px2rem(40px);
      height: px2rem(40px);
      border-radius: 50%;
      color: #333333;
      font-size: px2rem(14px);
      margin-right: px2rem(10px);
    }
  }
</style>
